Locate the User's Position

googleMAPを表示する場合は、事前にGoogle Maps Platform APIキーを取得しなければなりません。月間28,000回のマップロードまで無償、超過分は有償になります。

このボタンをクリックして所在の緯度と経度を表示せよ.

get your coordinates

JavaScript Async and Await

「async / await」は、Promiseによる非同期処理をより簡潔に効率よく記述できる。「非同期処理」は時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みだが、Promiseを使うことで簡単に実現できる。

「async」は「function」の前に記述するだけで非同期処理を実行できる関数を定義します。「 async function() { } 」のようにasyncを記述しておくと、この関数はPromiseを返すようになり、「await」はPromise処理の結果が返ってくるまで一時停止してくれる演算子となる。 「await Promise処理」 のようにPromise処理が記述された関数の前に「await」を記述するだけで、結果が返ってくるまで一時停止してくれる。

ただし、「await」は「async」で定義された関数の中だけでしか使えないので注意しなければならない。「async / await」はペアで一緒に使われることが多い。

"async and await make promises easier to write "

1. async makes a function return a Promise
2. await makes a function wait for a Promise

JavaScript Fetch API

The Fetch API interface allows web browser to make HTTP requests to web servers.

1. サーバー上のpythonプログラムはブラウザで読めないし実行できないため、pythonのソースをファイル「pan_py.txt」に書き換え、fetchで読み込んで表示できます。

Fetch a file to change this text.

2. 非同期処理を利用して、「tax1.html」と「tax1.js」をfetchで読み込んで表示します。

Fetch a file to change this text.

Fetch a file to change this text.

3. objectを利用して、「tax.php」をfetchで読み込んで表示します。

Fetch a file to change this text.